<template>
  <div class="footer-content">
    <div class="item" @click="prevStepOperate()">
      <img class="item-icon" src="@/assets/images/ic_btn_undo_enable.png" alt="">
      <span class="item-label">撤销</span>
    </div>
    <div class="item" @click="nextStepOperate()">
      <img class="item-icon" src="@/assets/images/ic_btn_reundo_enable.png" alt="">
      <span class="item-label">还原</span>
    </div>
    <template v-if="queryParams && queryParams.design_type == 1">
      <div class="item">
        <div @click="handlelayer">
          <img class="item-icon" src="@/assets/images/ic_btn_layer_enable.png" alt="">
          <span class="item-label">层级</span>
        </div>
        <div v-show="layerShow" class="layer-container">
          <div class="layer-content">
            <div class="layer-item" @click="itemBringToFront">
              <img class="layer-item-icon" src="@/assets/images/ic_tc_zd.png" alt="">
              <span class="item-label-text">置顶</span>
            </div>
            <div class="layer-item" @click="itemBringForward">
              <img class="layer-item-icon" src="@/assets/images/ic_tc_syc.png" alt="">
              <span class="item-label-text">上一层</span>
            </div>
            <div class="layer-item" @click="itemSendBackwards">
              <img class="layer-item-icon" src="@/assets/images/ic_tc_xyc.png" alt="">
              <span class="item-label-text">下一层</span>
            </div>
            <div class="layer-item" @click="itemSendToBack">
              <img class="layer-item-icon" src="@/assets/images/ic_tc_zdb.png" alt="">
              <span class="item-label-text">置底</span>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <div @click="handleLayerItemShow">
          <img class="item-icon" src="@/assets/images/tuceng.png" alt="">
          <span class="item-label">图层</span>
        </div>
        <div v-show="layerItemShow" class="layer-container2">
          <div class="layer-item-container">
            <div
              v-for="(item, index) in layerItem"
              :key="index"
              class="item-content"
              @click="handleObjectItem(index, item.selectable)" >
              <img v-if="item.type === 'image'" class="image-item" :src="item.src || item._element.currentSrc" alt="">
              <div v-else-if="item.type === 'textbox'" class="text-item">{{ item.text }}</div>
              <div v-if="!item.selectable" class="lock-icon"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="item" style="display: none;">
        <div @click="hanleMore">
          <img class="item-icon" src="@/assets/images/ic_btn_more_enable.png" alt="">
          <span class="item-label">更多</span>
        </div>
        <div v-show="moreShow" class="layer-container">
          <div class="layer-content">
            <div v-if="currentSelectionElement && currentSelectionElement.type === 'image'" class="layer-item" @click="handleMatting">
              <img v-if="currentSelectionElement && currentSelectionElement.isMatting" class="layer-item-icon" src="@/assets/images/ic_share_script_selected.png" alt="">
              <img v-else class="layer-item-icon" src="@/assets/images/ic_share_script_unselected.png" alt="">
              <span class="item-label-text">抠图</span>
            </div>
            <div class="layer-item" @click="handleSelectable">
              <img v-if="currentSelectionElement && !currentSelectionElement.selectable" class="layer-item-icon" src="@/assets/images/ic_share_script_selected.png" alt="">
              <img v-else class="layer-item-icon" src="@/assets/images/ic_share_script_unselected.png" alt="">
              <span class="item-label-text">锁定</span>
            </div>
            <div class="layer-item" @click="handleMove">
              <img v-if="currentSelectionElement && !currentSelectionElement.isMove" class="layer-item-icon" src="@/assets/images/ic_share_script_selected.png" alt="">
              <img v-else class="layer-item-icon" src="@/assets/images/ic_share_script_unselected.png" alt="">
              <span class="item-label-text">移动</span>
            </div>
            <div class="layer-item" @click="handleEdit">
              <img v-if="currentSelectionElement && currentSelectionElement.isEdit" class="layer-item-icon" src="@/assets/images/ic_share_script_selected.png" alt="">
              <img v-else class="layer-item-icon" src="@/assets/images/ic_share_script_unselected.png" alt="">
              <span class="item-label-text">编辑</span>
            </div>
            <div v-if="currentSelectionElement && currentSelectionElement.type === 'image'" class="layer-item" @click="handleSticker">
              <img v-if="currentSelectionElement && currentSelectionElement.isSticker" class="layer-item-icon" src="@/assets/images/ic_share_script_selected.png" alt="">
              <img v-else class="layer-item-icon" src="@/assets/images/ic_share_script_unselected.png" alt="">
              <span class="item-label-text">贴纸</span>
            </div>
            <div v-if="currentSelectionElement && currentSelectionElement.type === 'image'" class="layer-item" @click="handleXieyinImage">
              <img v-if="currentSelectionElement && currentSelectionElement.isXieyinImage" class="layer-item-icon" src="@/assets/images/ic_share_script_selected.png" alt="">
              <img v-else class="layer-item-icon" src="@/assets/images/ic_share_script_unselected.png" alt="">
              <span class="item-label-text">谐音底图</span>
            </div>
            <div v-if="currentSelectionElement && currentSelectionElement.type === 'textbox'" class="layer-item" @click="handleXieYin">
              <span class="item-label-text">谐音设置</span>
            </div>
            <div class="layer-item" @click="handleSetBackgroundImage">
              <span class="item-label-text">设为底图</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item" @click="handleSave">
        <div class="save-btn">保存</div>
      </div>
    </template>
    <template v-else>
      <!-- v-if="!isIos" -->
      <div v-if="queryParams.isAuthor === '0'" class="save-btn-container">
        <van-button type="info" size="small" @click="handleImagePreview" block color="linear-gradient(to right, #8773f9, #8CA6DB)">
          <span class="save-text">立即制作</span>
        </van-button>
      </div>
      <div v-else-if="queryParams.isAuthor === '1'" class="save-btn-container">
        <van-button type="info" size="small" @click="handleImagePreview" block color="linear-gradient(to right, #8773f9, #8CA6DB)">
          <span class="save-text">立即制作</span>
        </van-button>
      </div>
      <!-- <div v-else class="save-btn-container ios-btn-tip">
        <van-button type="info" size="small" @click="handleIosTip" block color="linear-gradient(to right, #8773f9, #8CA6DB)">
          <span class="save-text">苹果系统暂不支持</span>
        </van-button>
      </div> -->
    </template>
    <!-- 预览图片-提交作品 -->
    <van-popup v-model="showImage" round :style="{ maxHeight: '80%', width: '90%' }">
      <div class="image-container artworks-container">
        <div class="image-content">
          <van-image
            width="100%"
            height="250px"
            fit="contain"
            :src="imageBase64"
            style="float: left;"
          />
        </div>
        <van-field label-width="2.5em" v-model="uploadForm.title" label="标题" :border="true" placeholder="请输入搜索关键词" />

        <!-- 分类-->
        <van-field name="radio" icon-size="16px" label-width="2.5em" label="分类">
          <template #input>
            <div class="type-container">
              <div
                v-for="(item, index) in artworksTypeAllListData"
                :key="item.id"
                class="type-item"
                :class="{
                  'active-item': item.id == uploadForm.cate_id
                }"
                @click="changeType(item)">
                {{ item.category_name }}
              </div>
            </div>
          </template>
        </van-field>

        <!-- 标签 -->
        <van-field v-if="currentArtworksLabelList && currentArtworksLabelList.length > 0" name="radio" icon-size="16px" label-width="2.5em" label="标签">
          <template #input>
            <div class="type-container">
              <div
                v-for="(item, index) in currentArtworksLabelList"
                :key="item.id"
                class="type-item"
                :class="{
                  'active-item': item.checked
                }"
                @click="selectArtworksLabel(item)">
                {{ item.label_name }}
              </div>
            </div>
          </template>
        </van-field>

        <!-- 专辑 -->
        <van-field v-if="albumList && albumList.length > 0" name="radio" icon-size="16px" label-width="2.5em" label="专辑">
          <template #input>
            <div class="type-container">
              <div
                v-for="(item, index) in albumList"
                :key="item.id"
                class="type-item"
                :class="{
                  'active-item': item.checked
                }"
                @click="selectArtworksAlbum(item)">
                {{ item.name }}
              </div>
            </div>
          </template>
        </van-field>

        <van-button type="info" round block @click="sumbitImage">确定</van-button>
      </div>

    </van-popup>
    <!-- 编辑完成 -->
    <van-popup v-model="showSaveImage" round :style="{ maxHeight: '90%', width: '90%' }">
      <div class="image-container">
        <div class="preview-title">请预览您的模板制作效果</div>
        <div class="preview-image-container">
          <van-image
            width="100%"
            height="380px"
            fit="contain"
            :src="imageBase64"
            style="float: left;"
          />
          <div class="water-container"></div>
        </div>
        <div class="save-tip">确认无误后请点下方无水印制作可制作和保存高清无水印作品</div>
        <div class="preview-btn-container">
          <van-button type="default" block style="margin-right: 12px;" @click="showSaveImage = false">返回修改</van-button>
          <van-button type="info" block color="linear-gradient(to right, #8773f9, #8CA6DB)" @click="handleMakePic">无水印制作</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 设置谐音字 -->
    <van-popup v-model="showXieYinSet" round :style="{ maxHeight: '80%', width: '80%' }">
      <div class="image-container">
        <van-field label-width="4em" v-model="xieYinForm.xieYinText" label="谐音字" :border="true" placeholder="谐音字，必须文字匹配上" />
        <van-field label-width="4em" v-model="xieYinForm.xieYinColor" label="谐音颜色" :border="true" placeholder="请输入谐音字颜色" />
        <div class="set-direction">
          <div class="label">文字方向</div>
          <van-radio-group v-model="xieYinForm.textDirection" direction="horizontal">
            <van-radio name="horizontal">横向</van-radio>
            <van-radio name="vertical">竖向</van-radio>
          </van-radio-group>
        </div>
        <van-button type="info" round block @click="handleSetxieYinColor">提交</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import {
  uploadImgByBase64,
  createWallpaperTemplate,
  createPicSynthesisLog,
  makeArtworksTypeAllList,
  findAlbumByAuthorIdAndTypeId,
  makeChangePriceList,
  createMakeArtworks,
  artworksLabelList } from '@/utils/api'
export default {
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  data() {
    return {
      showXieYinSet: false,
      layerShow: false,
      moreShow: false,
      currentSelectionElement: null,
      imageBase64: '',
      showImage: false,
      showSaveImage: false,
      title: '',
      templateDetail: null,
      queryParams: null,
      isIos: false,
      layerItemShow: false,
      layerItem: [],
      xieYinForm: {
        xieYinText: '',
        xieYinColor: '',
        textDirection: 'horizontal', // 方向 horizontal 横 vertical 竖
      },
      artworksTypeAllListData: [], // 作品类型列表
      currentArtworksLabelList: [], // 作品标签列表
      artworksPriceList: [], // 价格列表
      albumList: [], // 专辑列表
      uploadForm: {
        type: '',
        title: '',
        cate_id: '',
        author_id: '',
        label_id: '',
        album_id: '',
        price: 0
      },
    }
  },
  watch: {
    '$store.state.design.currentSelectionElement': {
      immediate: true,
      handler(val, oldVal) {
        if (val) {
          this.currentSelectionElement = val;
          this.layerShow = false;
          this.moreShow = false;
          this.xieYinForm.xieYinText = val.xieYinText;
          this.xieYinForm.xieYinColor = val.xieYinColor;
          this.xieYinForm.textDirection = val.textDirection || 'horizontal';
        } else {
          this.currentSelectionElement = null;
          this.layerShow = false;
          this.layerItemShow = false;
          this.moreShow = false;
        }
      } 
    },
    '$store.state.user.queryParams': {
      immediate: true,
      handler(val) {
        if (val) {
          this.queryParams = val;
        }
      }
    },
    '$store.state.user.token': {
      immediate: true,
      handler(val) {
        if (val) {
          // this.getAllMaterialList();
          // this.getUserAllMaterialList();
          this.getMakeArtworksTypeAllList();
        }
      }
    }
  },

  created() {
    let userAgent = navigator.userAgent;
    let isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    this.isIos = isiOS;
  },

  methods: {

    // 点击选择分类
    changeType(itemData) {
      if (itemData.id != this.uploadForm.cate_id) {
        this.uploadForm.cate_id = itemData.id;
        this.uploadForm.label_id = '';
        this.uploadForm.album_id = '';
        this.getArtworksLabelList();
        this.findAlbumByAuthorIdAndTypeIdFn();
        // 设置价格
        let list = this.artworksPriceList;
        list.forEach(item => {
          if (item.id == itemData.id) {
            this.uploadForm.price = item.price;
          }
        });
      }
    },

    // 获取作品分类
    getMakeArtworksTypeAllList() {
      let paramsObject = this.$store.state.user.queryParams;
      if (paramsObject && paramsObject.author_id) {
        this.uploadForm.author_id = paramsObject.author_id;
        this.uploadForm.cate_id = paramsObject.cate_id;
        this.uploadForm.album_id = paramsObject.album_id;
        this.uploadForm.type = paramsObject.type;
        makeArtworksTypeAllList().then(result => {
          if (result && result.data) {
            let list = result.data;
            this.artworksTypeAllListData = list.filter(item => item.id !== 5);
            this.getMakePriceList();
            this.getArtworksLabelList(); // 获取作品标签列表
            this.findAlbumByAuthorIdAndTypeIdFn(); // 获取主页下的全部专辑
          }
        })
      }
    },

    // 获取作品标签列表
    getArtworksLabelList() {
      this.uploadForm.label_id = '';
      artworksLabelList({
        author_id: this.uploadForm.author_id,
        cate_id: this.uploadForm.cate_id,
      }).then(result => {
        if (result && result.data && result.data.length > 0) {
          let list = result.data;
          list.forEach(item => {
            item.checked = false;
          })
          this.currentArtworksLabelList = list;
        } else {
          this.currentArtworksLabelList = [];
        }
      })
    },

    // 选择作品标签
    selectArtworksLabel(labelInfo) {
      let currentArtworksLabelList = this.currentArtworksLabelList;
      currentArtworksLabelList.forEach(item => {
        if (item.id === labelInfo.id) {
          item.checked = !item.checked;
          this.uploadForm.label_id = item.checked ? item.id : '';
        } else {
          item.checked = false;
        }
      })
    },

    // 获取达人主页下的全部专辑
    findAlbumByAuthorIdAndTypeIdFn() {
      findAlbumByAuthorIdAndTypeId({
        author_id: this.uploadForm.author_id,
        artworks_type_id: this.uploadForm.type,
        artworks_cate_id: this.uploadForm.cate_id
      }).then(result => {
        if (result && result.data && result.data.length > 0) {
          let list = result.data;
          list.forEach(item => {
            if (item.id == this.uploadForm.album_id) {
              item.checked = true;
              this.uploadForm.album_id = item.id;
            } else {
              item.checked = false;
            }
          })
          this.albumList = list;
        } else {
          this.albumList = [];
        }
      })
    },

    // 选择专辑
    selectArtworksAlbum(itemData) {
      let albumList = this.albumList;
      albumList.forEach(item => {
        if (item.id == itemData.id) {
          item.checked = !item.checked;
          this.uploadForm.album_id = item.checked ? item.id : '';
        } else {
          item.checked = false;
        }
      })
    },

    // 获取价格列表
    getMakePriceList() {
      makeChangePriceList({
        author_id: this.uploadForm.author_id
      }).then(result => {
        if (result && result.data) {
          let list = result.data;
          this.artworksPriceList = list;
          let cate_id = this.uploadForm.cate_id;
          list.forEach(item => {
            if (item.id == cate_id) {
              this.uploadForm.price = item.price;
            }
          })
        }
      })
    },

    // 确定设置谐音
    handleSetxieYinColor() {
      this.handAccountCanvas.updateTextBox({
        type: 'xieYin',
        content: this.xieYinForm
      }).then(() => {
        this.showXieYinSet = false;
      })
    },

    // 设置谐音
    handleXieYin() {
      this.showXieYinSet = true;
    },

    // 无水印制作
    handleMakePic2() {
      this.$toast.loading({
        message: '加载中',
        position: 'center',
        forbidClick: true,
        duration: 0
      });
      uploadImgByBase64({
        base64: this.imageBase64.replace('data:image/png;base64,', ''),
        business_id: this.$store.state.user.business_id
      }).then(result => {
        if (result && result.data) {
          let queryParams = this.$store.state.user.queryParams;
          let image = result.data.url;
          if (queryParams && queryParams.origin === 'toutiao') {
            this.showSaveImage = false;
            this.$toast.clear();
            tt.miniProgram.navigateTo({
              url: `/subPagesA/makePic/makePic?image=${image}&detail_id=${queryParams.id || ''}&tool_id=${queryParams.tool_id || ''}&seach_code=${queryParams.seach_code || ''}&isAuthor=${queryParams.isAuthor || 0}`,
              success(res) {
                console.log("跳转成功", res);
              },
              fail(err) {
                console.log("navigateTo调用失败", err);
              },
            });
          } else if (queryParams && queryParams.origin === 'kuaishou') {
            this.showSaveImage = false;
            this.$toast.clear();
            ks.navigateTo({
              url: `/subPagesA/makePic/makePic?image=${image}&detail_id=${queryParams.id || ''}&tool_id=${queryParams.tool_id || ''}&seach_code=${queryParams.seach_code || ''}&isAuthor=${queryParams.isAuthor || 0}`,
              success(res) {
                console.log("跳转成功", res);
              },
              fail(err) {
                console.log("navigateTo调用失败", err);
              },
            });
          } else if (queryParams && queryParams.origin === 'weixin') {
            this.showSaveImage = false;
            this.$toast.clear();
            wx.miniProgram.navigateTo({
              url: `/subPagesA/makePic/makePic?image=${image}&detail_id=${queryParams.id || ''}&tool_id=${queryParams.tool_id || ''}&seach_code=${queryParams.seach_code || ''}&isAuthor=${queryParams.isAuthor || 0}`,
              success(res) {
                console.log("跳转成功", res);
              },
              fail(err) {
                console.log("navigateTo调用失败", err);
              },
            });
          }
        }
      })
    },

    // 无水印制作
    handleMakePic() {
      this.$toast.loading({
        message: '加载中',
        position: 'center',
        forbidClick: true,
        duration: 0
      });
      let queryParams = this.$store.state.user.queryParams;
      let paramsObject = this.handAccountCanvas.getObject().toJSON([ 'isEdit', 'isMove', 'isMatting', 'elType', 'fontFamilySrc', 'selectable', '_index', 'crossOrigin', 'evented', 'colorType', 'opacity', 'xieYinColor', 'xieYinText', 'lockMovementX', 'lockMovementY', 'isSticker', 'textDirection', 'isXieyinImage' ]);
      createPicSynthesisLog({
        imageBase64: this.imageBase64,
        id: queryParams.id,
        tool_id: queryParams.tool_id,
        clips_param: paramsObject,
        title: this.title
      }).then(result => {
        if (result && result.data) {
          let image = result.data.url;
          let logId = result.data.id;
          if (queryParams && queryParams.origin === 'toutiao') {
            this.showSaveImage = false;
            this.$toast.clear();
            tt.miniProgram.navigateTo({
              url: `/subPagesE/author/makeArtworksDowload?image=${image}&detail_id=${queryParams.id || ''}&tool_id=${queryParams.tool_id || ''}&seach_code=${queryParams.seach_code || ''}&isAuthor=${queryParams.isAuthor || 0}&log_id=${logId}`,
              success(res) {
                console.log("跳转成功", res);
              },
              fail(err) {
                console.log("navigateTo调用失败", err);
              },
            });
          } else if (queryParams && queryParams.origin === 'kuaishou') {
            this.showSaveImage = false;
            this.$toast.clear();
            ks.navigateTo({
              url: `/subPagesE/author/makeArtworksDowload?image=${image}&detail_id=${queryParams.id || ''}&tool_id=${queryParams.tool_id || ''}&seach_code=${queryParams.seach_code || ''}&isAuthor=${queryParams.isAuthor || 0}&log_id=${logId}`,
              success(res) {
                console.log("跳转成功", res);
              },
              fail(err) {
                console.log("navigateTo调用失败", err);
              },
            });
          } else if (queryParams && queryParams.origin === 'weixin') {
            this.showSaveImage = false;
            this.$toast.clear();
            wx.miniProgram.navigateTo({
              url: `/subPagesE/author/makeArtworksDowload?image=${image}&detail_id=${queryParams.id || ''}&tool_id=${queryParams.tool_id || ''}&seach_code=${queryParams.seach_code || ''}&isAuthor=${queryParams.isAuthor || 0}&log_id=${logId}`,
              success(res) {
                console.log("跳转成功", res);
              },
              fail(err) {
                console.log("navigateTo调用失败", err);
              },
            });
          }
        }
      })
    },

    // 预览图片
    handleImagePreview() {
      let viewWc = this.handAccountCanvas.getViewWc();
      let handAccountCanvas = this.handAccountCanvas.getObject();
      let backgroundImageWidth = handAccountCanvas.backgroundImage.width * handAccountCanvas.backgroundImage.scaleX;
      let backgroundImageHeight = handAccountCanvas.backgroundImage.height * handAccountCanvas.backgroundImage.scaleY;
      const canvasContentEl = document.querySelector(`#canvasContentEl`); // 画布容器
      let multiplier = 3;
      let multiplier3 = parseFloat(backgroundImageWidth * viewWc * 3 || 0);
      if (multiplier3 < 750) {
        multiplier = 4;
      }

      let image = handAccountCanvas.toDataURL({
        width: backgroundImageWidth * viewWc,
        height: backgroundImageHeight * viewWc,
        left: ((canvasContentEl.offsetWidth - backgroundImageWidth * viewWc) / 2),
        top: ((canvasContentEl.offsetHeight - backgroundImageHeight * viewWc) / 2),
        multiplier: multiplier, // 导出的倍数
        quality: 1,
      });

      this.imageBase64 = image;
      let templateDetail = this.$store.state.design.templateDetail;
      this.templateDetail = templateDetail;
      this.title = templateDetail ? templateDetail.title : '';
      this.showSaveImage = true;
    },


    // 保存图片
    handleSave() {
      let viewWc = this.handAccountCanvas.getViewWc();
      let handAccountCanvas = this.handAccountCanvas.getObject();
      let backgroundImageWidth = handAccountCanvas.backgroundImage.width * handAccountCanvas.backgroundImage.scaleX;
      let backgroundImageHeight = handAccountCanvas.backgroundImage.height * handAccountCanvas.backgroundImage.scaleY;
      const canvasContentEl = document.querySelector(`#canvasContentEl`); // 画布容器

      let image = handAccountCanvas.toDataURL({
        width: backgroundImageWidth * viewWc,
        height: backgroundImageHeight * viewWc,
        left: ((canvasContentEl.offsetWidth - backgroundImageWidth * viewWc) / 2),
        top: ((canvasContentEl.offsetHeight - backgroundImageHeight * viewWc) / 2),
        multiplier: 3, // 导出的倍数
        quality: 1,
      });
      this.imageBase64 = image;
      let templateDetail = this.$store.state.design.templateDetail;
      this.templateDetail = templateDetail;
      this.title = templateDetail ? templateDetail.title : '';
      this.showImage = true;
    },

    // 保存图片2
    handleSave2() {
      let handAccountCanvas = this.handAccountCanvas.getObject();
      let image = handAccountCanvas.toDataURL({
        width: handAccountCanvas.width,
        height: handAccountCanvas.height,
        multiplier: 2 // 导出的倍数
      });
      // ImagePreview([ image ]);
      this.imageBase64 = image;
      let templateDetail = this.$store.state.design.templateDetail;
      this.templateDetail = templateDetail;
      this.title = templateDetail ? templateDetail.title : '';
      this.showImage = true;
    },

    // 提交模板
    sumbitImage() {
      this.$toast.loading({
        message: '上传中',
        position: 'center',
        forbidClick: true,
        duration: 0
      });
      uploadImgByBase64({
        base64: this.imageBase64.replace('data:image/png;base64,', ''),
        business_id: this.$store.state.user.business_id
      }).then(result => {
        if (result && result.data) {
          let paramsObject = this.handAccountCanvas.getObject().toJSON([ 'isEdit', 'isMove', 'isMatting', 'elType', 'fontFamilySrc', 'selectable', '_index', 'crossOrigin', 'evented', 'colorType', 'opacity', 'xieYinColor', 'xieYinText', 'lockMovementX', 'lockMovementY', 'isSticker', 'textDirection', 'isXieyinImage' ]);
          paramsObject.clipPath.width = paramsObject.backgroundImage.width * paramsObject.backgroundImage.scaleX;
          paramsObject.clipPath.height = paramsObject.backgroundImage.height * paramsObject.backgroundImage.scaleY;
          let currentElement = this.handAccountCanvas.getObject();
          paramsObject.width = currentElement.width;
          paramsObject.height = currentElement.height;
          let uploadForm = this.uploadForm;
          uploadForm.font_attribute = paramsObject;
          uploadForm.cover_url = `${result.data.url}`;
          uploadForm.wx_cover_url = `${result.data.wx_cover_url}`;
          createMakeArtworks(uploadForm).then(result => {
            this.$toast.clear();
            if (result && result.code === 200) {
              this.$toast({
                message: '提交成功',
                position: 'center',
              });
              setTimeout(function() {
                uni.switchTab({ url: '/pages/creativeCenter/index' });
              }, 1500);
              // location.reload();
            }
          })
        }
      })
    },

    // 苹果保存提示
    handleIosTip() {
      this.$toast({
        message: '由于相关政策原因，苹果系统暂时不支持',
        position: 'center',
      });
    },

    // 撤销
    prevStepOperate() {
      this.handAccountCanvas.prevStepOperate();
    },

    // 还原
    nextStepOperate() {
      this.handAccountCanvas.nextStepOperate();
    },

    // 显示图层
    handleLayerItemShow() {
      const handAccountCanvas = this.handAccountCanvas.getObject();
      let items = handAccountCanvas.getObjects();
      // items = JSON.stringify(items);
      console.log(items)
      this.layerItem = items;
      if (items && items.length > 0) {
        this.layerItemShow = !this.layerItemShow;
        this.layerShow = false;
      } else {
        this.$toast({
          message: '请添加图层在操作！',
          position: 'center'
        });
      }
    },

    // 设置
    handleObjectItem(_index) {
      const handAccountCanvas = this.handAccountCanvas.getObject();
      const items = handAccountCanvas.getObjects();
      let actvieItem = items[_index];
      handAccountCanvas.setActiveObject(actvieItem);
      handAccountCanvas.renderAll();
      // this.$toast({
      //   message: '请添加图层在操作！',
      //   position: 'center'
      // });
    },

    // 显示层级
    handlelayer() {
      if (this.currentSelectionElement) {
        this.layerShow = !this.layerShow;
        this.moreShow = false;
        this.layerItemShow = false;
      } else {
        this.$toast({
          message: '请选择要编辑的元素',
          position: 'center'
        });
      }
    },

    // 置顶
    itemBringToFront() {
      this.handAccountCanvas.itemBringToFront();
    },

    // 置底
    itemSendToBack() {
      this.handAccountCanvas.itemSendToBack();
    },

    // 上一层
    itemBringForward() {
      this.handAccountCanvas.itemBringForward();
    },

    // 下一层
    itemSendBackwards() {
      this.handAccountCanvas.itemSendBackwards();
    },

    // 点击更多
    hanleMore() {
      if (this.currentSelectionElement) {
        this.moreShow = !this.moreShow;
        this.layerShow = false;
      } else {
        this.$toast({
          message: '请选择要编辑的元素',
          position: 'center'
        });
      }
    },

    // 点击是否锁定
    handleEdit() {
      let currentSelectionElement = this.currentSelectionElement;
      this.handAccountCanvas.updatedItem('edit', !currentSelectionElement.isEdit);
    },

    // 点击是否为谐音底图
    handleXieyinImage() {
      let currentSelectionElement = this.currentSelectionElement;
      this.handAccountCanvas.updatedItem('xieyinImage', currentSelectionElement.isXieyinImage ? currentSelectionElement.isXieyinImage : true);
    },

    // 点击是否锁定
    handleSticker() {
      let currentSelectionElement = this.currentSelectionElement;
      this.handAccountCanvas.updatedItem('sticker', !currentSelectionElement.isSticker);
    },

    // 点击是否可移动
    handleMove() {
      let currentSelectionElement = this.currentSelectionElement;
      this.handAccountCanvas.updatedItem('move', !currentSelectionElement.isMove);
    },

    // 点击锁定
    handleSelectable() {
      let currentSelectionElement = this.currentSelectionElement;
      this.handAccountCanvas.updatedItem('selectable', !currentSelectionElement.selectable);
    },

    // 点击抠图
    handleMatting() {
      let currentSelectionElement = this.currentSelectionElement;
      if (currentSelectionElement.type !== 'image') {
        this.$toast({
          message: '非图片元素，不可以使用',
          position: 'center'
        });
        return;
      }
      this.handAccountCanvas.updatedItem('matting', !currentSelectionElement.isMatting);
    },

    // 设置为背景底图
    handleSetBackgroundImage() {
      this.handAccountCanvas.setBackgroundImage();
    },
    
  }
}
</script>

<style lang="less" scoped>
  @mainColor: #AAB9E3;

  .image-container{
    padding: 12px;
  }

  .artworks-container{
    .van-field{
      padding-left: 0;
      padding-right: 0;
    }
  }

  .image-content{
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .footer-content{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 46px;

    .item{
      text-align: center;
      position: relative;
      min-width: 60px;
    }

    .save-btn-container{
      flex: 1;
      display: flex;
      margin-left: 140px;
      margin-right: 16px;
      justify-content: flex-end;

      .save-text{
        font-size: 13px;
      }
    }

    .ios-btn-tip{
      margin-left: 100px;
    }

    .layer-container{
      position: absolute;
      left: -74px;
      right: 0;
      margin: auto;
      width: 188px;
      z-index: 9999;
      padding: 6px;

      .layer-content{
        width: 100%;
        // background-color: #fff;
        display: flex;
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 14px 5px 8px 5px;
        overflow: hidden;
        // background: url(https://diy.eu14.cn/2023/09/27/20230927094313-pic_tc_fl.webp);
        background: url(https://diy.eu14.cn/2023/09/27/20230927094313-pic_tc_fl.webp);
        background-size: 100% 100%;
        flex-wrap: wrap;
      }

      .layer-item{
        color: #8773f9;
        min-width: 46px;
        margin-bottom: 6px;

        .layer-item-icon{
          width: 16px;
          height: 16px;
          border: 0;
          display: block;
          margin: auto;
        }
      }

      .item-label-text{
        font-size: 10px;
      }
    }

    .layer-container2{
      position: absolute;
      left: -8px;
      right: 0;
      margin: auto;
      width: 62px;
      max-height: 180px;
      z-index: 9999;
      background: rgba(0, 0, 0, .4);
      border-radius: 8px;
      overflow-y: auto;
      padding: 6px;
      // box-shadow: 0px 1px 1px 1px #EEEEF3;

      .item-content{
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 4px;
      }

      .text-item,
      .image-item{
        width: 48px;
        height: 48px;
        border: 1px solid #eaeaea;
        display: flex;
        align-items: center;
        font-size: 10px;
        justify-content: center;
        background-color: #fff;
      }

      .lock-icon{
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .2);
        left: 0;
        top: 0;
        background: url(https://img.alicdn.com/imgextra/i2/1888948409/O1CN01VbWojy2BzNQShNHjf_!!1888948409.png) no-repeat center;
        background-size: 24px 24px;
      }
    }

    .layer-item-container{
      background: rgba(255, 255, 255, .6);
      padding: 6px;
      border-radius: 8px;
    }

    .item-label{
      font-size: 10px;
      color: #fff;
    }

    .item-icon{
      width: 20px;
      height: 20px;
      border: 0;
      display: block;
      margin: auto;
    }

    .save-btn{
      width: 48px;
      height: 24px;
      font-size: 14px;
      color: @mainColor;
      font-weight: bold;
      line-height: 24px;
      text-align: center;
      border-radius: 15px;
      background: #fff;
      border: 1px solid #fff;
    }

    .preview-title{
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      padding: 12px 0 24px 0;
    }

    .save-tip{
      color: #888;
      font-size: 12px;
      padding: 24px 0;
    }

    .preview-image-container{
      overflow: hidden;
      position: relative;

      .water-container{
        width: 100%;
        height: 100%;
        background: url(https://baiwan-product.oss-cn-hangzhou.aliyuncs.com/watermark/desingshuiying.png);
        background-size: cover;
        position: absolute;
        pointer-events: none;
      }
    }

    .preview-btn-container{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
  }
  .set-direction{
    display: flex;
    padding: 10px 16px;
    .label{
      width: 4em;
      margin-right: 12px;
    }
  }

  .type-container{
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .type-item{
      max-width: 23.333333%; 
      min-width: 23.333333%;
      text-align: center;
      background-color: #F5F5F9;
      margin-bottom: 6px;
      border-radius: 4px;
      font-size: 12px;
      color: #666;
      position: relative;
      overflow: hidden; // 超出一行文字自动隐藏
      text-overflow: ellipsis;// 文字隐藏后添加省略号
      white-space: nowrap; // 强制不换行
    }

    .type-item:nth-child(2n){
      margin-left: 2%;
      margin-right: 2%;
    }
    
    .type-item:nth-child(4n){
      margin-left: 2%;
      margin-right: 0;
    }

    .delete-icon{
      position: absolute;
      width: 20px;
      height: 20px;
      right: 0;
      top: 0;
    }

    .add-label{
      border: 1px dashed #8CA6DB;
      background-color: #fff;
      color: #8CA6DB;
    }

    .active-item{
      background-color: #8CA6DB;
      color: #fff;
    }
  }
</style>
